<template>
  <div class="h-full w-full" ref="mattersRef">ksss</div>
</template>

<script setup lang="ts">
import Matter from 'matter-js';
const mattersRef = ref<HTMLElement>();
const Engine = Matter.Engine,
  Render = Matter.Render,
  Runner = Matter.Runner,
  Bodies = Matter.Bodies,
  Composite = Matter.Composite;

let engine = Engine.create();
onMounted(() => {
  // create a renderer
  console.log(mattersRef.value);

  let render = Render.create({
    element: mattersRef.value,
    engine: engine,
  });
  // create two boxes and a ground
  var boxA = Bodies.rectangle(400, 200, 80, 80);
  var boxB = Bodies.rectangle(450, 50, 80, 80);
  var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });

  // add all of the bodies to the world
  Composite.add(engine.world, [boxA, boxB, ground]);

  // run the renderer
  Render.run(render);

  // create runner
  var runner = Runner.create();

  // run the engine
  Runner.run(runner, engine);
});
</script>

<style lang="scss" scoped></style>
